Angular Material এর MatStepper কম্পোনেন্ট একটি স্টেপ-বাই-স্টেপ ফর্ম বা প্যানেল প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত ধাপে ধাপে প্রক্রিয়া সম্পাদন করতে যেমন নিবন্ধন ফর্ম, পেমেন্ট গেটওয়ে বা প্রোফাইল সেটিংসে ব্যবহার করা হয়। MatStepper ব্যবহারকারীদের প্রক্রিয়াটি একটি নির্দিষ্ট অর্ডারে সম্পন্ন করতে সহায়তা করে, যেখানে তারা প্রতিটি ধাপে যেতে পারেন এবং প্রয়োজন হলে পেছনে ফিরে আসতেও পারেন।

এই টিউটোরিয়ালে, আমরা Angular Material MatStepper কম্পোনেন্টের সাথে একটি কাস্টম টেমপ্লেট তৈরি এবং কাস্টমাইজেশন দেখবো।

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে MatStepperModule, MatInputModule, এবং ReactiveFormsModule মডিউলগুলি আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatStepperModule } from '@angular/material/stepper';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    MatStepperModule,
    MatInputModule,
    MatButtonModule,
    ReactiveFormsModule
  ],
  ...
})
export class AppModule { }

২. HTML টেমপ্লেটের মধ্যে MatStepper তৈরি করা

এখানে আমরা একটি সিম্পল স্টেপার কম্পোনেন্ট তৈরি করবো, যেখানে প্রতিটি স্টেপ একটি ইনপুট ফিল্ড থাকবে এবং পরবর্তী স্টেপে যাওয়ার জন্য একটি বাটন থাকবে।

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step label="Step 1">
    <form [formGroup]="firstFormGroup">
      <mat-form-field>
        <input matInput placeholder="First name" formControlName="firstName" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext [disabled]="!firstFormGroup.valid">Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step label="Step 2">
    <form [formGroup]="secondFormGroup">
      <mat-form-field>
        <input matInput placeholder="Last name" formControlName="lastName" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext [disabled]="!secondFormGroup.valid">Next</button>
        <button mat-button matStepperPrevious>Back</button>
      </div>
    </form>
  </mat-step>

  <mat-step label="Step 3">
    <p>You are now done!</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="finish()">Finish</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

এই উদাহরণে, আমরা একটি horizontal stepper তৈরি করেছি, যেখানে ৩টি স্টেপ রয়েছে। প্রথম দুটি স্টেপে ইনপুট ফিল্ড ব্যবহার করা হয়েছে এবং শেষ স্টেপে একটি "Done" বার্তা এবং ফিনিশ বাটন রয়েছে।

• [linear]="isLinear": এটি ডেটার ভ্যালিডেশন ভিত্তিকভাবে পরবর্তী স্টেপে যাওয়ার জন্য ডিফল্টভাবে লিনিয়ার ফ্লো সেট করে।
• matStepperNext: এটি পরবর্তী স্টেপে যাওয়ার জন্য ব্যবহৃত হয়।
• matStepperPrevious: এটি পূর্ববর্তী স্টেপে ফিরে যাওয়ার জন্য ব্যবহৃত হয়।

৩. টাইপস্ক্রিপ্ট ফাইলে ফর্ম গ্রুপ তৈরি করা

এখন, আমাদের ফর্মগুলির জন্য ফর্ম গ্রুপ তৈরি করতে হবে। আমরা ReactiveFormsModule ব্যবহার করছি, তাই প্রথমে ফর্ম গ্রুপ তৈরি করা হবে।

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {

  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  ngOnInit() {
    this.firstFormGroup = new FormGroup({
      firstName: new FormControl('', Validators.required),
    });

    this.secondFormGroup = new FormGroup({
      lastName: new FormControl('', Validators.required),
    });
  }

  finish() {
    alert('You have completed the steps!');
  }
}

• firstFormGroup এবং secondFormGroup: ফর্মের জন্য দুটি গ্রুপ তৈরি করা হয়েছে, যেখানে প্রত্যেকটি ইনপুট ফিল্ডের জন্য FormControl এবং Validators ব্যবহার করা হয়েছে।
• finish(): শেষ স্টেপে "Finish" বাটনে ক্লিক করার পর একটি অ্যালার্ট মেসেজ দেখাবে।

৪. কাস্টম স্টাইল এবং থিমিং

এখন আপনি MatStepper কম্পোনেন্টের কাস্টম স্টাইল এবং থিমিং করতে পারেন। Angular Material এর থিমিং সিস্টেম ব্যবহার করে আপনি এই স্টেপার কম্পোনেন্টের স্টাইল কাস্টমাইজ করতে পারবেন।

উদাহরণ CSS:

mat-stepper {
  background-color: #f9f9f9;
  padding: 20px;
}

mat-step {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}

mat-stepper mat-step-header {
  font-weight: bold;
}

button.mat-button {
  margin-top: 10px;
}

এখানে, স্টেপার কম্পোনেন্টের জন্য ব্যাকগ্রাউন্ড এবং প্যাডিং কাস্টমাইজ করা হয়েছে।

৫. কাস্টম টেমপ্লেট এবং স্টেপার কন্ট্রোল

MatStepper কাস্টমাইজেশনের জন্য, আপনি স্টেপের লেবেল, কন্টেন্ট, এবং বাটনের স্টাইল কাস্টমাইজ করতে পারেন। এখানে কাস্টম টেমপ্লেটের একটি উদাহরণ দেওয়া হলো যেখানে আপনি প্রতিটি স্টেপের লেবেল এবং কন্টেন্ট পরিবর্তন করতে পারেন।

উদাহরণ:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [label]="step1Label">
    <p>This is the first step</p>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step [label]="step2Label">
    <p>This is the second step</p>
    <button mat-button matStepperNext>Next</button>
    <button mat-button matStepperPrevious>Back</button>
  </mat-step>

  <mat-step [label]="step3Label">
    <p>You are done!</p>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button (click)="finish()">Finish</button>
  </mat-step>
</mat-horizontal-stepper>

export class StepperComponent implements OnInit {
  isLinear = true;
  step1Label = 'Step 1: Personal Information';
  step2Label = 'Step 2: Address';
  step3Label = 'Step 3: Confirmation';

  ngOnInit() {}
  
  finish() {
    alert('You have completed the steps!');
  }
}

এখানে, প্রতিটি স্টেপের লেবেল কাস্টমাইজ করা হয়েছে এবং ব্যবহারকারী স্টেপের মাধ্যমে এগোতে পারবে।

Angular Material MatStepper একটি অত্যন্ত কার্যকরী কম্পোনেন্ট যা অ্যাপ্লিকেশনে ধাপে ধাপে ফর্ম বা কাজ সম্পাদন করতে সহায়ক। এটি সহজেই কাস্টমাইজ করা যায় এবং বিভিন্ন ধরনের ফর্ম, প্রক্রিয়া বা সেটআপে ব্যবহৃত হতে পারে। MatStepper এর মাধ্যমে আপনি একটি সুন্দর এবং ইন্টারঅ্যাকটিভ ইউজার এক্সপেরিয়েন্স তৈরি করতে পারবেন যা ব্যবহারকারীদের সাহায্য করবে ধাপে ধাপে তাদের কাজ সম্পন্ন করতে।